<!DOCTYPE html>
<html lang="zh-cN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API示例</title>
    <script src="../js/js11_fetch.js" async></script>
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <h1>fetch()方法示例</h1>
    <p>数据参考网址：jsonplaceholder</p>
    <p class="msg"></p>
    <ul class="posts"></ul>
    <p class="new_post"></p>
    <p><img src="" alt=""></p>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");
            getPost(1).then(data =>{
                msg.innerHTML += data.title;
            });

            let posts = document.querySelector(".posts");
            getPosts().then((data) =>{
                data.slice(0,10).forEach(o=>{
                    const li =document.createElement("li");
                    li.textContent = `${o.id} - ${o.title} - ${o.body}`;
                    posts.appendChild(li);
                })
            });

            let newPost = document.querySelector(".new_post"); 
            createPost({title: "标题", body: "内容",userId: 1}).then(data=>{
                newPost.innerHTML += JSON.stringify(data);
            });

            let img = document.querySelector("p>img");
            const imgUrl = "https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0";
            fetchImage(imgUrl).then(blob=>{
                const objectURL = URL.createObjectURL(blob);
                img.src = objectURL;
            })
            .catch(error=>{
               console.log(error); 
            });
        });
    </script>
</body>
</html>